<template>
  <div>
    <pure-table :data="tabdata" :columns="initPureTableConfig(roleTableConfig)" showOverflowTooltip border :isShowPag="false">
      <template #img="{ row }">
        <sj-link @click="viewImg(row.img)">
          照片{{ isNullOrEmpty( row.img?.length ? row.img?.length : '0' ) }}
        </sj-link>
      </template>
      <template #action="{ row }">
        <el-space>
          <sj-link custom-type="sblue" :underline="false" @click="info(row)">查看</sj-link>
        </el-space>
      </template>
    </pure-table>
    <el-image-viewer @close="closeImgViewer" :url-list="imageUrl" fit="none" v-if="showImageViewer" />
  </div>
</template>
<script setup lang="ts">
import {isNullOrEmpty,initPureTableConfig} from '@/utils/functions'
import {
  cloneDeep,
  isAllEmpty,
  deviceDetection,
  debounce
} from "@pureadmin/utils";
import { ElMessage, ElMessageBox } from "element-plus";
import { addDialog } from "@/components/ReDialog";
import alarminfo from "@/views/operate/alarm-management/alarm-log/components/alarm-information.vue"
import { defaultInfoForm } from "@/views/operate/alarm-management/alarm-log/index"
const tableData = ref({
  data: []
});
import {
  getInfo
} from "@/api/operate/alarm-management/alarm-log/index";
import { ref } from "vue";
const props = defineProps({
  tabdata: {
    type: Array,
    default: []
  }
});
const titles = {
  id: "编号", // id
  place: "所在位置", // workOrderTitle
  deviceName: "设备信息", // workOrderTitle
  deviceSN: "设备序列号", // projectName
  alarmType: "告警类型", // workOrderType
  alarmTitle: "告警原因", // workOrderStatus
  img: "其他信息", // waiting
  action: "操作"
};
const roleTableConfig = [
  { type: "selection", align: "left" },
  { prop: "id", label: titles.id, width:  100 },
  { prop: "place", label: titles.place },
  { prop: "deviceSN", label: titles.deviceSN },
  { prop: "deviceName", label: titles.deviceName },
  { prop: "alarmType", label: titles.alarmType },
  { prop: "alarmTitle", label: titles.alarmTitle },
  { slot: "img", label: titles.img },
  { slot: "action", label: titles.action, width: 90, fixed: "right" }
];
const showImageViewer = ref(false)
let imageUrl = []
const viewImg = url => {
  if (!url || url.length < 1) {
    ElMessage({
      message: "暂无图片",
      type: "warning",
    });
    return
  }
  imageUrl = url;
  showImageViewer.value = true;
};
const closeImgViewer = () => {
  showImageViewer.value = false;
};
const formRef = ref(null)
const info = (row: any) => {
  addDialog({
    title: `告警详情`,
    width: "800px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    props: {
      id: row.id
    },
    hideFooter: true,
    closeOnClickModal: false,
    contentRenderer: () => h(alarminfo, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        id: row.id,
        formInline: defaultInfoForm()
      };
      getInfo({ id: row.id }).then(res => {
        if (res.code == 200) {
          options.props.formInline = res.result;
        }
        options.props.isLoading = false;
      });
    }
  });
};
</script>
